<!--
 * @FilePath: 利用js结合css3来实现动画.html
 * @Author: 苏苏少年
 * @Date: 2022-11-19 19:23:22
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 10px;
            top: 100px;
            opacity: 1;
            /* ease：（逐渐变慢）默认值 */
            transition: all 1s ease;
        }
        /* 利用js 把这个类名加到这个div中*/
        .active{
            left: 500px;
            width: 200px;
            height: 200px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <button id="start">开始动画</button>
    <div class="box">苏苏少年</div>
        <!-- 第一种 -->
    <script>
        var start = document.getElementById("start");
        var box = document.querySelector(".box");
        // 就是说,一个属性要如果不断的切换, 往往就是定义一个变量!
        // 表示当前没有active属性 默认没有!
        var flag = false;
        // 函数节流锁 true 表示当前锁是打开的 (默认开启)
        var lock = true;

        start.onclick = function(){
            if(!lock) {
                return; // 如果锁是关闭的,啥也不做
            } else{
                lock = false;
                // 条件为真, 那就该有两个属性 (代码中只有一个属性),所以要加另一个属性 
                if (!flag) {
                    box.classList.add("active");
                    flag = true;
                } else {
                    box.classList.remove("active");
                    flag = false;
                }
            }

            // 计时器(等待开锁)
            var time = setTimeout(function () {
                lock = true;
            }, 1000);
        }

    </script>
    
        
</body>
</html>

<!-- 
    温馨提示:
            在实际开发中,我们更希望 如果动画在没有到达终点状态之前,不管用户如何点击按钮,都不会在执行新的动画. 
        只有达到终点状态后, 再点击按钮, 才会执行下一次动画.
            这就是用到 "函数节流"
 -->